<template>
  <div class="employees">
    <!--
     查：
     1：定义api
     2:导入
     3：进入页面就调用，存储数据并渲染
     4：与分页建立联系
     -->
    <el-card class="top-card">
      <div class="btn">
        <!--

          1:创建一个新的页面用于实现excel导入
            a:创建vue组件
            b:配制路由
            c:点击跳转
          2：修改上传组件的样式
            a:先创建上传组件
            b:在新页面使用
            c:修改样式
         -->
        <!-- <el-button
          v-if="
            $store.state.user.userInfo.roles.points.includes(
              'employees_importBtn'
            )
          "
          type="primary"
          @click="importClick"
        >导入</el-button>
        v-on:属性名.修饰符='值'
         -->
        <el-button
          v-buttonshow:inlineBlock="'employees_importBtn'"
          type="primary"
          @click="importClick"
        >导入</el-button>
        <el-button
          v-buttonshow:inlineBlock="'employees_outputBtn'"
          type="primary"
          @click="outputClick"
        >导出</el-button>
        <!--
          1:vender文件夹复制到src下
          2:下载  yarn add file-saver 插件
          3:导出点击事件中调用插件的导出方法
          4：配制相应传入的数据实现下载

         -->

        <el-button type="primary" @click="addEvent">+新增员工</el-button>
      </div>
    </el-card>
    <el-card>
      <el-table :data="list" style="width: 100%">
        <el-table-column label="序号">
          <template v-slot="{ $index }">
            <div>
              {{ (page.page - 1) * page.size + $index + 1 }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="姓名" sortable prop="username" />
        <el-table-column label="相片" sortable prop="staffPhoto">
          <template v-slot="{ row }">
            <!-- 生成二维码
            1:点击打开弹框
               a:创建弹框
               b:定义一个显示与隐藏的变量值
               c:点击时该值改为true
            2:弹框内显示一个二维码
             二维码对应的字符就是图片地址
             -->
            <img
              v-globalImgerror="defaultImg"
              class="avatar"
              :src="row.staffPhoto"
              alt=""
              @click="imgClick(row.staffPhoto)"
            >
          </template>
        </el-table-column>

        <el-table-column label="手机号" sortable prop="mobile" />
        <el-table-column label="工号" sortable prop="workNumber" />
        <!-- 转换聘用形势 -->
        <!-- 1:通过formatter转换 -->
        <!-- <el-table-column
          label="聘用形势"
          sortable
          prop="formOfEmployment"
          :formatter="formatter"
        >
        </el-table-column> -->
        <!-- 2:通过过滤器转换 -->
        <!-- <el-table-column label="聘用形势" sortable prop="formOfEmployment">
          <template v-slot="{ row }">
            <div>
              {{ row.formOfEmployment | formatterFormOf }}
            </div>
          </template>
        </el-table-column> -->
        <!-- 过滤器：作用：字符转换 特点：不能使用this,它只能用于 {{}}与v-bind
          1:定义（全局，局部）
            局部：
              filters:{
                过滤器名(value){
                   return 转换后的值
                }
              }
            全局
              src/filters/index.js
             export default {
              方法名(value){
                  return 转换后的值
              },
              方法名2(value){
                  return 转换后的值
              }
             }
             在main.js注册
             import filtersJs from '@/filters'
             Object.keys(filtersJs).forEach(item=>{
               Vue.filter(item,filtersJs[item])
             })

          2:使用
            {{ 实参值 | 过滤器方法名}}

          -->
        <!-- 3：通过自定义指令
             定义
                局部：
                 directives:{
                  指令名:{
                    bind:绑定（类似于beforeMount）,
                    inserted:渲染后，类似于mounted,
                    update:更新时，不保证更新完成
                    componentUpdated:更新完成时(类似于updated)
                    unbind:销毁前，类似于beforeDestroy
                    unbind（dom,obj,vnode）{
                      dom:指令所在dom
                      obj:配制数据信息
                         属性，修饰符，值
                     vnode：context:能拿到指令所在组件的实例对象
                    }
                  }
                 }
             使用
               v-指令名:属性.修饰符="值"
           -->
        <!-- <el-table-column label="聘用形势" sortable prop="formOfEmployment">
          <template v-slot="{ row }">
            <div v-formOfEmployment="row.formOfEmployment" />
          </template>
        </el-table-column> -->
        <!-- 4:在渲染前转换   -->
        <el-table-column label="聘用形势" sortable prop="formOfEmployment" />

        <el-table-column label="部门" sortable prop="departmentName" />
        <el-table-column label="入职时间" sortable prop="timeOfEntry" />
        <el-table-column label="状态" sortable prop="enableState" />
        <el-table-column label="操作" sortable width="300" fixed="right">
          <template v-slot="{ row }">
            <div>
              <!--
              1:跳转页面
                 a:创建页面所对应组件
                 b:配制路由
                 c:点击跳转
              2：跳转过去时需要带上该用户的id，通过动态路由配制传递id
                 配制路由：{
                   path:'/xxx地址/:id?'   ?id可传可不传,不加就一定要传
                 }
                 传
                  this.$router.push('/xxx地址/123')
                 收：
                   this.$route.params.id===123

             -->

              <el-button type="text" @click="goDetail(row.id)">查看</el-button>
              <el-button type="text">转正</el-button>
              <el-button type="text">调岗</el-button>
              <el-button type="text">离职</el-button>
              <!--
1:创建一个角色弹框组件
2：在父组件使用
3：角色列表显示（多选框显示）
   a:调用接口获取所有角色
4：当前点击帐号所拥有角色的回显
   调用接口获取当前帐号所拥有的角色
   回显
5：修改提示
   调用接口

 -->

              <el-button type="text" @click="roleClick(row.id)">角色</el-button>

              <!--
                1:确认框
                2：定义api
                3:导入
                4：点击确定后调用
                5：调用成功
                   a:提示
                   b:刷新列表数据，回到第一页
               -->
              <el-button type="text" @click="del(row.id)">删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="page">
        <el-pagination
          layout="total,sizes,prev,pager,next,jumper"
          :total="page.total"
          :page-sizes="[1, 5, 10, 100, 200, 300]"
          :page-size="page.size"
          :current-page="page.page"
          @size-change="sizeChange"
          @current-change="pageChange"
        />
      </div>
    </el-card>
    <!-- 新增弹框组件 -->
    <Add ref="add" @getData="getData" />
    <!-- 二维码弹框组件 -->
    <el-dialog title="二维码" width="500px" :visible.sync="show">
      <!--
        el-dialog内的默认插槽在第一次打开后才渲染

      -->
      <div style="text-align: center">
        <canvas ref="canvas" />
      </div>
    </el-dialog>
    <!-- 分配角色弹框 -->
    <Role ref="role" :is-show.sync="isShow" />
  </div>
</template>
<script>
import { sysUser, sysUserDelete } from '@/api/employees.js'
import employeesData from '@/api/constant/employees.js'
import Add from './components/add.vue'
import moment from 'moment'
import cookieJs from 'js-cookie'
import Qrcode from 'qrcode'
import Role from './components/role.vue'
// js-cookie: get:获取  set:设置  remove:删除
// moment  时间转换   moment(时间值).format("YYYY-MM-DD")
export default {
  components: {
    Add,
    Role
  },
  filters: {
    // formatterFormOf(str) {
    //   const result = employeesData.hireType.find((item) => {
    //     return item.id === str
    //   })
    //   return result ? result.value : '-'
    // }
  },
  directives: {
    formOfEmployment: {
      inserted(dom, obj, vnode) {
        // const result = employeesData.hireType.find((item) => {
        //   return item.id === obj.value
        // })
        // const resultStr = result ? result.value : '-'
        dom.innerText = vnode.context.formatter(null, null, obj.value)
      },
      componentUpdated(dom, obj, vnode) {
        dom.innerText = vnode.context.formatter(null, null, obj.value)
      }
    }
  },
  data() {
    return {
      isShow: false,
      show: false,
      defaultImg: require('@/assets/common/head.jpg'),
      list: [{}],
      employeesData,
      page: {
        total: 100,
        size: +cookieJs.get('size') || 5,
        page: 1
      }
    }
  },
  created() {
    this.getData()
  },
  methods: {
    // 获取数据
    async getData() {
      const res = await sysUser(this.page)
      // 复杂数据类型，使用该数据的地方只要有一个地方（堆）改了，使用该引用的地方都会变
      res.data.rows.forEach((item) => {
        const result = employeesData.hireType.find((item2) => {
          return item2.id === +item.formOfEmployment
        })
        const resultStr = result ? result.value : '-'
        item.formOfEmployment = resultStr
        item.timeOfEntry = moment(item.timeOfEntry).format('YYYY-MM-DD')
      })

      this.list = res.data.rows
      this.page.total = res.data.total
      console.log('员工列表', res)
    },
    sizeChange(size) {
      this.page.size = size
      cookieJs.set('size', size)
      this.page.page = 1
      this.getData()
    },
    pageChange(page) {
      this.page.page = page
      this.getData()
    },
    // 格式化聘用形势
    formatter(row, column, cellValue, index) {
      // employeesData.hireType:转换规则
      // cellValue：当前项值
      // 1：找出数组中对应的项（cellValue===当前项的id）
      // 数组方法，map,forEach,findIndex,find,some,every...
      // const 返回值=数组.find(item=>{  return boolean值,true:返回值=当前item,false...所有项都是false,返回值为undefined})
      const result = employeesData.hireType.find((item) => {
        return item.id === cellValue
      })
      // 2:通过返回值取出相应的字符值
      return result ? result.value : '-'
    },
    // 新增点击事件
    addEvent() {
      this.$refs.add.isShow = true
    },
    // 删除点击
    del(id) {
      this.$confirm('您确定删除该用户吗？', '提示').then(async() => {
        await sysUserDelete(id)
        this.$message.success('删除成功')
        this.pageChange(1)
      })
    },
    // 导入点击
    importClick() {
      this.$router.push('/employees/import')
    },
    // 详情跳转
    goDetail(id) {
      this.$router.push('/employees/detail/' + id)
    },
    // 导出功能
    async outputClick() {
      const header = {
        姓名: 'username', // string	非必须		姓名
        手机号: 'mobile', // string	非必须		手机号
        入职时间: 'timeOfEntry', // string	非必须		入职时间
        聘用形式: 'formOfEmployment', //	number	非必须		聘用形式
        工号: 'workNumber', // string	非必须		工号
        组织名称: 'departmentName', // string	非必须		组织名称
        转正时间: 'correctionTime' // string	非必须		转正时间
      }

      // data数据，需求是将list数据数组中每一项（对象）中的值按照header的次序依次取出
      // 拿到所有数据
      const res = await sysUser({
        page: 1,
        size: 10000
      })
      // 复杂数据类型，使用该数据的地方只要有一个地方（堆）改了，使用该引用的地方都会变
      res.data.rows.forEach((item) => {
        const result = employeesData.hireType.find((item2) => {
          return item2.id === +item.formOfEmployment
        })
        const resultStr = result ? result.value : '-'
        item.formOfEmployment = resultStr
        item.timeOfEntry = moment(item.timeOfEntry).format('YYYY-MM-DD')
      })

      // res.data.rows
      // 循环整 个列表数据：为了产生一个只有值的二维数据 [[]]，它的数据次序要按照头部数组次序来
      const data = res.data.rows.map((item) => {
        // const arr = []
        // Object.keys(header).forEach((item2) => {
        //   arr.push(item[header[item2]])
        // })
        // return arr
        // 循环头部数据
        return Object.keys(header).map((item2) => {
          // 按钮次序return相应项的值，最终产生按次序的新数组
          return item[header[item2]]
        })
      })
      import('@/vendor/Export2Excel')
        .then((res) => {
          res.export_json_to_excel({
            header: Object.keys(header),
            data,
            filename: '用户列表'
          })
          console.log(res)
        })
        .catch(() => {})
    },
    // 图片生成二维码
    imgClick(url) {
      if (!url) {
        return
      }
      this.show = true
      this.$nextTick(() => {
        Qrcode.toCanvas(this.$refs.canvas, url, {
          width: 300,
          height: 300
        })
      })
    },
    // 分配角色点击事件
    roleClick(id) {
      // 打开角色弹框
      this.isShow = true
      // 调用api方法获取详情
      this.$refs.role.getUserInfo(id)
    }
  }
}
</script>
<style lang="scss" scoped>
.employees {
  padding: 20px;
  .top-card {
    margin-bottom: 15px;
    .btn {
      text-align: right;
    }
  }
  .page {
    padding-top: 15px;
    text-align: right;
  }
  .avatar {
    width: 70px;
    height: 70px;
    object-fit: contain;
  }
}
</style>
